        <div class="control-group <#if nameMsg??>error</#if>">
          <label class="control-label" for="inputAccount">Account</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon-user"></i></span>
              <input type="text" minlength="5" maxlength="15" id="inputAccount" name="user.name" value="${(user.name)!}" placeholder="User name" autofocus required>
            </div>
            <p class="text-error">${nameMsg!}</p>
          </div>
        </div>
        <div class="control-group <#if emailMsg??>error</#if>">
          <label class="control-label" for="inputEmai">Email</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon-envelope"></i></span>
              <input type="email" id="inputEmail" name="user.email" value="${(user.email)!}" placeholder="Email" required>
            </div>
            <p class="text-error">${emailMsg!}</p>
          </div>
        </div>
        <div class="control-group <#if passwordMsg??>error</#if>">
          <label class="control-label" for="inputPassword">Password</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon-lock"></i></span>
              <input type="password" minlength="6" maxlength="20" id="inputPassword" name="user.password" placeholder="Password" required>
            </div>
            <p class="text-error">${passwordMsg!}</p>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputConfirmPass">Confirm Password</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon-lock icon-white"></i></span>
              <input type="password" minlength="6" maxlength="20" id="inputConfirmPass" name="repass" placeholder="Confirm your Password" required>
            </div>
            <p class="text-error">${confirmMsg!}</p>
          </div>
        </div>
        <div class="control-group <#if captchaMsg??>error</#if>">
          <label class="control-label" for="inputCaptcha">Captcha</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon-check"></i></span>
              <input type="text" minlength="6" maxlength="6" id="inputCaptcha" class="input-small" name="captcha" required>
              <span id="captcha"><a id="captcha" onclick="getCaptcha();" href="javascript:;" title="click to change another one"><img id="captcha"
                  src="${baseUrl!}/captcha" /></a></span>
            </div>
            <p class="text-error">${captchaMsg!}</p>
          </div>
        </div>

  <script src='assets/jquery-validation/dist/jquery.validate.min.js' type='text/javascript'></script>
  <script type="text/javascript">
    function getCaptcha() {
      $("img#captcha").attr("src", "${baseUrl!}/captcha?r=" + Math.random());
      $(":input[name='captcha']").val("");
    }
    $().ready(function() {
      $("#signupForm").validate();
    });
  </script>